<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      th:replace="layout">
<div th:fragment="content">
    <script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=fMxiBiysxnftzlF9c59VG9CA"></script>
    <section>
        <div class="contact__map">
            <div id="contactMap"></div>
        </div>
    </section>
    <section>
        <div class="contact__detail">
            <div class="contact__title">

            </div>
            <div class="contact__company">

            </div>
            <div class="contact__line">

            </div>
            <div class="contact__item row">
                <div class="col-lg-4">
                    <div class="contact__item--icon">
                        <div class="contact__item--bg">
                            <i class="iconfont icon-lianxi-phone"></i>
                        </div>
                    </div>
                    <div class="contact__item--title"></div>
                    <div class="contact__item--text">
                        <dl>
                            <dt>联系信息</dt>
                            <dd>电话:133333333</dd>
                            <dd>邮箱:youdiands@163.com</dd>
                            <dd>工作时间:09：00~18：00（周一到周日）</dd>
                        </dl>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="contact__item--icon">
                        <div class="contact__item--bg">
                            <i class="iconfont icon-hezuo"></i>
                        </div>
                    </div>
                    <div class="contact__item--title"></div>
                    <div class="contact__item--text">
                        <dl>
                            <dt>商务合作</dt>
                            <dd>联系人:梁经理</dd>
                            <dd>电话:133333333</dd>
                        </dl>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="contact__item--icon">
                        <div class="contact__item--bg">
                            <i class="iconfont icon-ditu"></i>
                        </div>
                    </div>
                    <div class="contact__item--title"></div>
                    <div class="contact__item--text">
                        <dl>
                            <dt>公司地址</dt>
                            <dd>广州市白云区鹤龙街鹤边员村北街25号首层厂房之二</dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <script type="text/javascript">

        // 百度地图API功能
        var map = new BMapGL.Map("contactMap");
        var point = new BMapGL.Point(113.276449,23.230261);
        map.centerAndZoom(point, 20);

        var marker = new BMapGL.Marker(point);  // 创建标注
        map.addOverlay(marker);              // 将标注添加到地图中
        var opts = {
            width : 200,     // 信息窗口宽度
            height: 100,     // 信息窗口高度
            title : "优典纸品包装(广州)有限公司" , // 信息窗口标题
            message:"优典纸品包装(广州)有限公司"
        }
        var infoWindow = new BMapGL.InfoWindow("地址：广州市白云区鹤龙街鹤边员村北街25号首层厂房之二", opts);  // 创建信息窗口对象
        marker.addEventListener("click", function(){
            map.openInfoWindow(infoWindow, point); //开启信息窗口
        });
    </script>

</div>
</html>